<template>
	<div>
		<home-header></home-header>
		<home-swiper :list="swiperList"></home-swiper>
		<home-icons :list="iconList"></home-icons>
		<home-recommend :list="recommendList"></home-recommend>
		<home-guess :list="guessList"></home-guess>
	</div>
</template>
<script>
import HomeHeader from "./components/Header";
import HomeSwiper from "./components/Swiper";
import HomeIcons from "./components/Icons";
import HomeRecommend from "./components/Recommend";
import HomeGuess from "./components/Guess";
import axios from "axios";
import { mapState } from "vuex";

export default {
    name: "Home",
    components: {
        HomeHeader,
        HomeSwiper,
        HomeIcons,
        HomeRecommend,
        HomeGuess
    },
    data() {
        return {
            swiperList: [],
            iconList: [],
            recommendList: [],
            guessList: [],
            lastCity: ""
        };
    },
    computed: {
        ...mapState(["city"])
    },
    methods: {
        getHomeInfo() {
            axios
                .get("http://other.xiabingbing.cn/index.json?city=" + this.city)
                .then(this.getHomeInfoSucc);

            // axios.get('/api/index.json').then(this.getHomeInfoSucc)
            // 等同于
            // axios.get('/static/mock/index.json').then(this.getHomeInfoSucc)
        },
        getHomeInfoSucc(res) {
            console.log(res);
            const rs = res.data;
            if (rs.status && rs.data) {
                this.swiperList = rs.data.swiperList;
                this.iconList = rs.data.iconList;
                this.recommendList = rs.data.recommendList;
                this.guessList = rs.data.guessList;
            }
        }
    },
    mounted() {
        this.lastCity = this.city;
        this.getHomeInfo();
    },
    //<keep-alive>下存在的钩子函数
    activated() {
        if (this.lastCity !== this.city) {
            this.lastCity = this.city;
            this.getHomeInfo();
        }
    }
};
</script>
<style>
</style>
